<template>
  <div class="container">
    <div :id="id" :option="option"></div>
  </div>
</template>
<script>
import HighCharts from "highcharts";
export default {
  props:{
    chartData: {
      type: Array,
      required: true
    },
  },
  data() {
    return {
      id: "tests",
      option: {},
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.init(val)
      }
    }
  },

  mounted() {
    this.init(this.chartData);
  },
  methods: {
    init(data) {
      this.option = {
        chart: {
          type: "pie", //饼图
          width: 360,
          height: 200,
          color: "transparent",
          backgroundColor: "transparent",
          options3d: {
            enabled: true, //使用3d功能
            alpha: 65, //延y轴向内的倾斜角度
            beta: 0,
            frame: {
              // Frame框架，3D图包含柱的面板，我们以X ,Y，Z的坐标系来理解，X轴与 Z轴所形成
              // 的面为bottom，Y轴与Z轴所形成的面为side，X轴与Y轴所形成的面为back，bottom、
              // side、back的属性一样，其中size为感官理解的厚度，color为面板颜色
              bottom: {
                size: 1,
                color: "transparent",
              },
              side: {
                size: 1,
                color: "transparent",
              },
              back: {
                size: 1,
                color: "transparent",
              },
            },
          },
        },
        title: {
          text: "", //图表的标题文字
          style: {
            fontSize: 18, //字体大小
            color: "#C7DDFF", //字体颜色
          },
        },
        credits: {
          enabled: false, // 禁用版权信息
        },

        colors: ["#07D1FA"],
        subtitle: {
          text: "", //副标题文字
        },
        plotOptions: {
          pie: {
            allowPointSelect: true, //每个扇块能否选中
            cursor: "pointer", //鼠标指针
            depth: 15, //饼图的厚度
            dataLabels: {
              enabled: false, //是否显示饼图的线形tip
            },
          },
        },
        legend: {
          align: "right", //水平方向位置
          verticalAlign: "bottom", //垂直方向位置
          layout: "vertical",
          x: 20,
          y: 20,
          symbolWidth: 10,
          symbolHeight: 10,
          symbolRadius: 0,
          itemStyle: {
            color: "#C7DDFF",
            fontSize: 10,
          },
        },

        series: [
          {
            type: "pie",
            name: "温度测试", //统一的前置词,非必须
            showInLegend: true,
            size: "160%",
            data: data
          },
        ],
      };
      HighCharts.chart(this.id, this.option);
    },
  },
};
</script>

<style scoped>
/* 容器 */
.container {
  width: 362px;
  height: 200px;
}
</style>
